<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检测中</title>
    {#引入jQuery#}
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery.nicescroll.min.js"></script>
    <link href="../static/css/scroll_content.css" rel="stylesheet" type="text/css">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/progress_bar.css" rel="stylesheet" type="text/css">
    <link href="../static/css/start.css" rel="stylesheet" type="text/css">

    <script>
        function endedOperation() {
            // 检测完成后的处理
            // 隐藏进行中的框，显示检测完成的框
            $("#process_ok").show();
            // 计算得分
            var flaw_cnt = $("#flaw_cnt").text();
            var good_percent = ((1 - (flaw_cnt /{{ pic_cnt }})) * 100).toFixed(2);
            $("#good_percent").text(good_percent);
            var scores = ['SSS', 'SS', 'S', 'A', 'B', 'C', 'D', 'E'];
            if (good_percent < 65) {
                good_percent = 65
            }
            var score_level = parseInt(7 - (good_percent - 65) / 5);
            var score = scores[score_level];
            $("#score").text(score);
        }

        function appendRes(res) {
            // 根据前端返回的json串修改页面的一些内容，
            $("#cur_index").text(Number(res['index']));
            var percent = ((Number(res['index'])) * 100 / {{ pic_cnt }}).toFixed(2) + '%';
            $(".progress-bar").css('width', percent);
            $(".progress-value").text(percent);
            if (res['flaw_type'] !== '正常') {
                var flaw_cnt_div = $("#flaw_cnt");
                var flaw_cnt = Number(flaw_cnt_div.text()) + 1;
                flaw_cnt_div.text(flaw_cnt);
            }
            var new_item =
                '<li>' +
                '    <div>' + res['index'] + '</div>' +
                '    <div>' + res['file_path'] + '</div>' +
                '    <div>' + res['prob'] + '</div>' +
                '    <div>' + res['flaw_type'] + '</div>' +
                '</li>';

            $(".maquee ul").append(new_item);

            // 处理滚动条
            var flaw_content = $("#contentscroll");
            var boxscroll = $('.maquee');
            var scrollHeight = flaw_content.height() - boxscroll.height();
            if (scrollHeight < 0) {
                scrollHeight = 0;
            }
            boxscroll.getNiceScroll(0).doScrollTop(scrollHeight, 100);
        }

        $(function () {
            // niceScroll
            $("html").niceScroll();  // The document page (body)
            $(".maquee").niceScroll("#contentscroll", {
                cursorcolor: "#153C41",
                cursoropacitymax: 0.7,
                {#boxzoom: true,#}
                {#touchbehavior: true#}
            });

            // 开始检测
            console.log("start predicting");
            // 访问'/work_start?pic_dir={{ pic_dir }}'网址，后端开始预测
            $.ajax({url: '/work_start?pic_dir={{ pic_dir }}&token={{ token }}'});

            // 建立一个循环执行的函数，执行间隔250ms
            var sitv = setInterval(function () {
                // 循环的内容
                // 循环访问'/get_data'页面，从消息队列取一个结果，res就代表了前端返回的一个json数据
                $.getJSON('/get_data?token={{ token }}', function (res) {
                    // 控制台打印返回的结果，控制台按f12查看，然后点到console选项卡
                    console.log(res);
                    if (res === "ended") {
                        // 全部数据获取完毕后，执行收尾工作
                        endedOperation();
                        clearInterval(sitv);
                        return;
                    }
                    if (res === "queue is empty") {
                        return;
                    }
                    // 追加显示数据
                    appendRes(res);
                });
            }, 100);                                 // 每1秒查询一次后台进度

        });

    </script>
</head>
<body>
<div class="top_bar">
    <div class="progress-bar" style="width:0; background:#51675A;">
    </div>
    <div class="content">
        <div class="pic_dir">
            目标目录：{{ pic_dir }}
        </div>
        <div class="progress-value">
            0%
        </div>
    </div>
</div>

{# 所有瑕疵滚动框 #}
<div class="Top_Record">
    <div class="record_Top">
        <p style="color: #F7DF95;">
            已检测(<span id="cur_index">0</span>)
            <span id="flaw_cnt" style="display: none">0</span>
        </p>
    </div>
    <div class="topRec_List">
        <dl>
            <dd>编号</dd>
            <dd>文件名</dd>
            <dd>概率</dd>
            <dd>类型</dd>
        </dl>
        <div class="maquee">
            <div id="contentscroll">
                <ul>
                </ul>
            </div>
        </div>
    </div>
</div>

{# 处理完成显示 #}
<div id="process_ok" style="display: None">
    <div class="content">
        良品率：<span id="good_percent">--</span>%&nbsp;&nbsp;&nbsp;&nbsp;评分：<span id="score">--</span>
    </div>
</div>

</body>
</html>

